<template>
  <div id="themeManage">
    <div class="navBar">
      <!-- 主题检索 -->
      <div class="themeSearch">
        <span class="navTitle">主题</span>
        <div class="searchInput">
          <el-select v-model="themeSearch" size="mini" clearable placeholder="请选择">
            <el-option label="百度" value="百度"></el-option>
            <el-option label="高德" value="高德"></el-option>
            <el-option label="apple" value="apple"></el-option>
          </el-select>
        </div>
      </div>
      <!-- 类型检索 -->
      <div class="typeSearch">
        <span class="navTitle">类型</span>
        <div class="searchInput">
          <el-select v-model="typeSearch" size="mini" clearable placeholder="请选择">
            <el-option label="商铺" value="商铺"></el-option>
            <el-option label="机房" value="机房"></el-option>
            <el-option label="手扶梯" value="手扶梯"></el-option>
          </el-select>
        </div>
      </div>
      <!-- search按钮 -->
      <div class="searchBtn">
        <span></span>
      </div>
      <!-- 新增按钮 -->
      <div class="add" @click="addTheme">
        <span></span>
        <span>新增</span>
      </div>
    </div>
    <div class="content">
      <!-- 项目表格 -->
      <div class="themeTabel">
        <el-table :data="tableData" stripe style="width: 100%">
          <template v-for="(item,index) in tableNavList">
            <!-- 操作栏 -->
            <el-table-column
              v-if="item.prop == 'oper'"
              :key="index"
              :prop="item.prop"
              :label="item.label"
              :width="item.width"
              show-overflow-tooltip
              align="center"
            >
              <template slot-scope="scope">
                <el-button
                  v-for="(operLi,index) in scope.row.oper"
                  :key="index"
                  size="mini"
                  round
                  @click="handleEdit(scope.$index, scope.row,operLi.type)"
                >{{operLi.name}}</el-button>
              </template>
            </el-table-column>
            <el-table-column
              v-else-if="item.prop == 'color'"
              :key="index"
              :prop="item.prop"
              :label="item.label"
              :width="item.width"
              show-overflow-tooltip
              align="center"
            >
              <template slot-scope="scope">
                <div class="showColorBoard">
                  <span :style="{background: scope.row.color}"></span>
                  <p>{{scope.row.color}}</p>
                </div>
              </template>
            </el-table-column>
            <el-table-column
              v-else
              :key="index"
              :prop="item.prop"
              :label="item.label"
              :width="item.width"
              show-overflow-tooltip
              align="center"
            ></el-table-column>
          </template>
        </el-table>
      </div>
      <!-- 分页 -->
      <div class="pagination">
        <el-pagination
          @current-change="handleCurrentChange"
          :current-page="initPage"
          :page-size="10"
          layout="total, prev, pager, next, jumper"
          :total="10"
        ></el-pagination>
      </div>
    </div>
    <div class="functionList" v-if="isShowFun">
      <!-- 新增主题或修改 -->
      <div class="formContent" v-if="funShow.addTheme || funShow.modify">
        <div class="top">
          <funTitle
            :title="funShow.modify?'修改':'新增主题模板'"
            :type="funShow.modify?'modify':'addTheme'"
          />
        </div>
        <div class="funContent">
          <el-form
            :inline="true"
            size="small"
            label-position="right"
            label-width="80px"
            :model="addThemeForm"
            ref="addThemeForm"
            :rules="formRules"
          >
            <el-form-item label="主题" :prop="funShow.modify?'':'theme'">
              <el-autocomplete
                clearable
                class="inline-input"
                :disabled="funShow.modify"
                v-model="addThemeForm.theme"
                :fetch-suggestions="queryThemeSearch"
                placeholder="请输入"
              ></el-autocomplete>
            </el-form-item>
            <el-form-item label="类别" :prop="funShow.modify?'':'type'">
              <el-autocomplete
                clearable
                :disabled="funShow.modify"
                class="inline-input"
                v-model="addThemeForm.type"
                :fetch-suggestions="queryTypeSearch"
                placeholder="请输入"
              ></el-autocomplete>
            </el-form-item>
            <el-form-item label="类别名" prop="typeName">
              <el-input v-model="addThemeForm.typeName"></el-input>
            </el-form-item>
            <el-form-item class="colorPick" label="颜色" prop="color">
              <el-color-picker size="medium" v-model="addThemeForm.color"></el-color-picker>
            </el-form-item>
            <el-form-item v-if="!funShow.modify" size="medium">
              <el-button round @click="closeFun('addTheme')">取消</el-button>
              <el-button @click="submitaddThemeForm('addThemeForm')">确定</el-button>
            </el-form-item>
            <el-form-item v-else size="medium">
              <el-button round @click="closeFun('modify')">取消</el-button>
              <el-button @click="submitModifyForm('addThemeForm')">确定</el-button>
            </el-form-item>
          </el-form>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import funTitle from "../../components/funTitle";
export default {
  props: {},
  data() {
    return {
      // 主题搜索内容
      themeSearch: "",
      // 类型搜索类型
      typeSearch: "",
      // 表格标题
      tableNavList: [
        {
          label: "序号",
          prop: "No",
          width: "150"
        },
        {
          label: "ID",
          prop: "ID",
          width: "150"
        },
        {
          label: "主题",
          prop: "theme",
          width: "200"
        },
        {
          label: "类型",
          prop: "type",
          width: "200"
        },
        {
          label: "类别名",
          prop: "typeName",
          width: "200"
        },
        {
          label: "颜色",
          prop: "color",
          width: "200"
        },
        {
          label: "操作",
          prop: "oper"
        }
      ],
      // 表格数据
      tableData: [
        {
          No: "1",
          ID: "31",
          theme: "百度",
          type: "购物中心",
          typeName: "商铺",
          color: "#F7DBD7",
          oper: [
            {
              name: "删除",
              type: "delete"
            },
            {
              name: "修改",
              type: "modify"
            }
          ]
        },
        {
          No: "2",
          ID: "32",
          theme: "高德",
          type: "购物中心",
          typeName: "机房",
          color: "#5D69BD",
          oper: [
            {
              name: "删除",
              type: "delete"
            },
            {
              name: "修改",
              type: "modify"
            }
          ]
        }
      ],
      // 默认分页
      initPage: 1,
      // 是否显示功能
      isShowFun: false,
      // 功能菜单显隐设置
      funShow: {
        addTheme: false,
        modify: false
      },
      // 新增主题表单
      addThemeForm: {
        theme: "",
        type: "",
        typeName: "",
        color: ""
      },
      // 表单规则
      formRules: {
        theme: [{ required: true, message: "请选择主题", trigger: "blur" }],
        type: [{ required: true, message: "请选择类别", trigger: "blur" }],
        typeName: [
          { required: true, message: "请输入类别名", trigger: "blur" }
        ],
        color: [
          { required: true, message: "请选择类别名颜色", trigger: "blur" }
        ]
      },
      // 主题类型
      themeList: [
        { value: "百度" },
        { value: "高德" },
        { value: "apple" },
        { value: "腾讯" },
        { value: "默认" }
      ],
      // 类型列表
      typeList: [{ value: "购物中心" }, { value: "医院" }, { value: "写字楼" }]
    };
  },
  computed: {},
  created() {},
  mounted() {},
  watch: {},
  methods: {
    addTheme() {
      this.isShowFun = true;
      this.funShow.addTheme = true;
    },
    // 打开功能弹窗
    handleEdit(index, row, type) {
      if (type === "delete") {
        this.$confirm("此操作将永久删除该项主题, 是否继续?", "提示", {
          confirmButtonText: "确定",
          cancelButtonText: "取消",
          type: "warning"
        })
          .then(() => {
            this.$message({
              type: "success",
              message: "删除成功!"
            });
          })
          .catch(() => {
            this.$message({
              type: "info",
              message: "已取消删除"
            });
          });
      } else {
        this.isShowFun = true;
        this.funShow[type] = true;
      }
    },
    // 切换分页触发函数
    handleCurrentChange(val) {
      console.log(`当前页: ${val}`);
    },
    // 关闭功能弹窗
    closeFun(funType) {
      this.isShowFun = false;
      this.funShow[funType] = false;
      // 重置新增项目内容
      this.addThemeForm = {
        loginName: "",
        userName: "",
        password: "",
        accountType: "",
        manageProject: []
      };

      //   if (funType === "modify") {
      //     this.tableData[this.operIndex].manageProject = this.tableData[
      //       this.operIndex
      //     ].manageProject.join("、");
      //   }
    },
    // 新增主题表单提交以及验证
    submitaddThemeForm(formName) {
      this.$refs[formName].validate(valid => {
        if (!valid) {
          return false;
        } else {
          // 重置新增项目内容
          this.addThemeForm = {
            loginName: "",
            userName: "",
            password: "",
            accountType: "",
            manageProject: []
          };
          this.closeFun("addTheme");
          this.$message({
            message: "新增成功",
            type: "success"
          });
        }
      });
    },
    // 修改主题表单提交以及验证
    submitModifyForm(formName) {
      this.$refs[formName].validate(valid => {
        if (!valid) {
          return false;
        } else {
          // 重置新增项目内容
          this.addThemeForm = {
            loginName: "",
            userName: "",
            password: "",
            accountType: "",
            manageProject: []
          };
          this.closeFun("addTheme");
          this.$message({
            message: "修改成功",
            type: "success"
          });
        }
      });
    },
    // 主题搜索框检索
    queryThemeSearch(queryString, callback) {
      const themeList = this.themeList;
      const results = queryString
        ? themeList.filter(this.createFilter(queryString))
        : themeList;
      callback(results);
    },
    // 类型搜索框检索
    queryTypeSearch(queryString, callback) {
      const typeList = this.typeList;
      const results = queryString
        ? typeList.filter(this.createFilter(queryString))
        : typeList;
      callback(results);
    },
    // 搜索筛选
    createFilter(queryString) {
      return results => {
        return (
          results.value.toLowerCase().indexOf(queryString.toLowerCase()) === 0
        );
      };
    }
  },
  components: {
    funTitle
  }
};
</script>

<style lang="less">
#themeManage {
  position: relative;
  width: 100%;
  height: 100%;
  .navBar {
    position: absolute;
    top: 0;
    right: 0;
    width: 100%;
    height: 80px;
    background-color: #fff;
    -webkit-user-select: none;
    .themeSearch {
      position: absolute;
      width: 280px;
      height: 80px;
      top: 50%;
      left: 16px;
      transform: translateY(-50%);
      .navTitle {
        position: absolute;
        left: 0;
        top: 50%;
        transform: translateY(-50%);
        padding: 0 5px;
        height: 30px;
        font-size: 14px;
        font-weight: 400;
        line-height: 30px;
        color: rgba(56, 56, 56, 1);
      }
      .searchInput {
        position: absolute;
        left: 50px;
        top: 50%;
        transform: translateY(-50%);
        width: 192px;
        height: 30px;
        .el-select {
          position: absolute;
          top: 50%;
          transform: translateY(-50%);
          .el-input__inner {
            position: relative;
            border: 1px solid #dcdfe6;
            background: rgba(239, 240, 244, 1);
            font-size: 12px;
            border-radius: 15px;
          }
          .el-input__inner:focus {
            border: 1px solid #5d69bd;
          }
        }
      }
    }
    .typeSearch {
      position: absolute;
      width: 280px;
      height: 80px;
      top: 50%;
      left: 280px;
      transform: translateY(-50%);
      .navTitle {
        position: absolute;
        left: 0;
        top: 50%;
        transform: translateY(-50%);
        padding: 0 5px;
        height: 30px;
        font-size: 14px;
        font-weight: 400;
        line-height: 30px;
        color: rgba(56, 56, 56, 1);
      }
      .searchInput {
        position: absolute;
        left: 50px;
        top: 50%;
        transform: translateY(-50%);
        width: 192px;
        height: 30px;
        .el-select {
          position: absolute;
          top: 50%;
          transform: translateY(-50%);
          .el-input__inner {
            position: relative;
            border: 1px solid #dcdfe6;
            background: rgba(239, 240, 244, 1);
            font-size: 12px;
            border-radius: 15px;
          }
          .el-input__inner:focus {
            border: 1px solid #5d69bd;
          }
        }
      }
    }
    .searchBtn {
      position: absolute;
      width: 26px;
      height: 26px;
      top: 50%;
      left: 550px;
      transform: translateY(-50%);
      border-radius: 50%;
      border: 1px solid #5d69bd;
      transition: all 0.5s;
      cursor: pointer;
      span {
        position: absolute;
        left: 0;
        top: 0;
        width: 100%;
        height: 100%;
        background: url("../../assets/images/themeSearch.png") no-repeat center;
        background-size: 50%;
        transition: all 0.5s;
      }
      &:hover {
        background-color: #5d69bd;
        span {
          background-image: url("../../assets/images/themeHoverSearch.png");
        }
      }
    }
    .add {
      position: absolute;
      width: 100px;
      height: 30px;
      border: 1px solid rgba(93, 105, 189, 1);
      box-shadow: 0px 0px 14px #dee2f3;
      opacity: 1;
      border-radius: 18px;
      right: 36px;
      top: 50%;
      transform: translateY(-50%);
      color: rgba(93, 105, 189, 1);
      transition: all 0.5s;
      cursor: pointer;
      &:hover {
        color: #fff;
        background-color: #5d69bd;
        span:nth-child(1) {
          background-image: url("../../assets/images/addHover.png");
        }
      }
      span:nth-child(1) {
        position: absolute;
        width: 15px;
        height: 15px;
        top: 51%;
        left: 24px;
        transform: translateY(-50%);
        background: url("../../assets/images/add.png") no-repeat center;
        background-size: contain;
        transition: all 0.5s;
      }
      span:nth-child(2) {
        position: absolute;
        font-size: 14px;
        height: 20px;
        line-height: 20px;
        left: 45px;
        top: 50%;
        transform: translateY(-50%);
        letter-spacing: 2px;
      }
    }
  }
  .content {
    position: absolute;
    top: 100px;
    left: 0px;
    width: 98.6%;
    height: 85.2%;
    background-color: #fff;
    box-shadow: 0px 0px 10px rgba(236, 238, 249, 1);
    .themeTabel {
      position: absolute;
      left: 50%;
      top: 20px;
      transform: translateX(-50%);
      width: 98.2%;
      height: 770px;
      .el-table {
        .el-table--striped .el-table__body tr.el-table__row--striped td {
          background: rgba(248, 249, 250, 1);
        }
        thead {
          color: rgba(0, 12, 23, 1);
        }
        td,
        th.is-leaf {
          border-bottom: 0px;
        }
        td {
          padding: 20px 0;
        }
        th {
          background: rgba(239, 240, 244, 1);
        }
        .showColorBoard {
          display: flex;
          width: 100px;
          margin: 0 auto;
          span {
            width: 20px;
            height: 20px;
            border-radius: 50%;
          }
          p {
            margin-left: 6px;
            color: rgba(128, 128, 128, 1);
          }
        }
      }
      .is-round {
        color: rgba(93, 105, 189, 1);
        font-size: 12px;
        font-weight: 400;
        border: 1px solid rgba(93, 105, 189, 1);
        transition: all 0.5s;
        &:hover {
          color: #fff;
          background-color: #5d69bd;
        }
      }
      .is-round:nth-child(1) {
        &:hover {
          color: #fff;
          background-color: rgba(252, 80, 108, 1);
          border: 1px solid rgba(252, 80, 108, 1);
        }
      }
    }
    .pagination {
      position: absolute;
      bottom: 44px;
      right: 20px;
      .el-pagination__total {
        border: 1px solid rgba(219, 219, 219, 1);
        color: rgba(92, 92, 92, 1);
        border-radius: 12px;
        width: 102px;
        height: 24px;
        line-height: 24px;
        text-align: center;
        margin-top: 3px;
        font-size: 12px;
      }
      .el-pagination__jump {
        position: relative;
        .el-input__inner {
          border-radius: 12px;
          width: 38px;
          height: 24px;
          line-height: 24px;
          color: rgba(92, 92, 92, 1);
          font-size: 12px;
          &:hover {
            border: 1px solid #5d69bd;
          }
        }
        .el-input__inner:focus {
          border: 1px solid #5d69bd;
        }
      }
      .el-pager {
        margin-top: 2px;
        li {
          position: relative;
          width: 24px;
          height: 24px;
          min-width: 0px;
          line-height: 24px;
          margin-left: 5px;
          transition: all 0.5s;
          &:hover {
            color: #5d69bd;
          }
        }
        li.active {
          background: rgba(93, 105, 189, 1);
          opacity: 1;
          border-radius: 50%;
          color: #fff;
        }
        .el-icon-d-arrow-left:before {
          position: absolute;
          left: 50%;
          top: 50%;
          transform: translate(-50%, -50%);
        }
        .el-icon-d-arrow-right:before {
          position: absolute;
          left: 50%;
          top: 50%;
          transform: translate(-50%, -50%);
        }
      }
      .btn-prev:hover,
      .btn-next:hover {
        color: #5d69bd;
      }
    }
  }
  .functionList {
    position: absolute;
    top: 100px;
    left: 0px;
    width: 98.6%;
    height: 85.2%;
    background: rgba(0, 12, 23, 0.2);
    box-shadow: 0px 0px 19px rgba(36, 176, 171, 0.11);
    z-index: 100;
    // 取消提交按钮
    .el-form-item--medium {
      position: absolute;
      width: 200px;
      right: 0;
      bottom: -10px;
      .el-button {
        width: 88px;
        height: 32px;
        border-radius: 17px;
        text-align: center;
        padding: 0;
        background: rgba(93, 105, 189, 1);
        color: #fff;
        &:hover {
          border: 1px solid #5d69bd;
        }
      }
      .is-round {
        background: rgba(236, 238, 249, 1);
        color: #5d69bd;
      }
    }
    .formContent {
      position: absolute;
      left: 50%;
      top: 43%;
      transform: translate(-50%, -50%);
      width: 472px;
      height: 460px;
      background: rgba(255, 255, 255, 1);
      border-radius: 6px;
      .top {
        width: 100%;
        height: 30px;
        margin-top: 11px;
      }
      .funContent {
        margin: 0 auto;
        padding-top: 20px;
        width: 430px;
        height: 340px;
        border-bottom: 1px solid rgba(226, 235, 243, 1);
        .el-form {
          width: 425px;
          margin: 50px auto;
          .el-form-item--small {
            width: 350px;
            margin-left: 60px;
          }
          .el-form-item:nth-child(4) {
            width: 256px;
            .el-form-item__content {
              width: 176px;
            }
          }
          .el-input__inner {
            width: 176px;
          }
        }
      }
      .colorPick {
        .el-form-item__content {
          width: 100px!important;
        }
      }
    }
  }
}
</style>
